<template>
  <article class="page">
    <headerbar>培训班</headerbar>

    <section class=" bg-light-gray">

      <section class="d-scroll-head list-news-img list-wenda">
      <cube-scroll
        ref="scroll"
        :options="options"
        @pulling-up="onPullingUp"
      >

        <div class="item block" @click="goDetail(item)" v-for="(item,index) in list" :key="index">
          <div class="icon">
            <span class="icon-text">培</span>
          </div>
          <div class="cont">
            <h2 class="title">{{item.trainingclass}}</h2>
            <div class="tip">
              <span>办班单位：{{item.deptname}}</span>
            </div>
            <div class="tip"><span>{{item.className}}</span></div>
            <div class="tip">
              <span>{{item.institutionsName}}</span>
              <span>期数：{{item.numberofperiods}}</span>
            </div>
          </div>
        </div>

        <noData v-if="!hasList() && !isLoading"></noData>
      </cube-scroll>

      </section>


    </section>
  </article>
</template>

<script>
  export default {
    name: 'trainingplanClassList',
    data () {
      return {
        currentIndex: 0,
        pageIndex: 1,
        pageSize: 10,
        menuId: '',
        isLoading: true,
        menuList: [],
        list: [],
        options: {
          pullUpLoad: true,
          scrollbar: false
        }
      }
    },
    created () {
      this.fetchList()
    },
    methods: {
      fetchList () {
        let params = {
          "page": this.pageIndex,
          "limit": this.pageSize
        }
        this.fetchService.trainingplanClassList(params).then(res => {
          if (res.code !== 0) {
            return this.tools.alert(res.message || res.resp_msg)
          }
          this.isLoading = false
          this.$refs.scroll.forceUpdate && this.$refs.scroll.forceUpdate(true, false)
          this.pageIndex ++
          this.list = this.list.concat(res.data)
          if (res.data.length == 0) {
            this.tools.tip('暂无更多')
          }
          return res
        })
      },
      goDetail (item) {
        this.$store.state.trainingplanClassListItem = item
        this.$router.push({path: 'trainingplanClassListV2Detail', query: {id: item.id, institutionsName: item.institutionsName}})
      },
      hasList () {
        return this.list.length > 0
      },
      onPullingUp () {
        this.fetchList().then(res => {
          setTimeout(() => {
            this.$refs.scroll.forceUpdate && this.$refs.scroll.forceUpdate(true, false)
            this.options.isPullUpLoad = false
          }, 100)
        })
      }
    }
  }
</script>
<style lang="scss" scoped="">
  .list-news-img .item .cont .title {
    margin-bottom:15px;
    height:auto;
    min-height:1em;
    line-height: normal;
  }
</style>
